<template>
  <div class="photoViewer360Wrap" v-if="state.isShow">
    <div ref="viewerRef" class="photoViewer360"></div>
    <div class="goBack" @click="handleChangeViewer">
      <Icon icon="ion:arrow-back" :size="34" />
      <span class="text">返回</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { createApp, ref, unref, reactive, watch, nextTick, onMounted } from "vue";
import { Viewer } from "@photo-sphere-viewer/core";
import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
import { Icon } from "@gui-pkg/components";
import { getPanoramaList } from "@/api/panorama/baseData";
import { getAllMonitorData } from "@/api/mapServices/mapData";
import { uesParseUntilCannot } from "./uesParseUntilCannot";
import { InfoPopup } from "@/components/PhotoSphereViewerPopup";

defineOptions({ name: "PhotoViewer360" });

const monitorAllData = ref(null); // 所有站点信息数据
const viewerRef = ref<HTMLDivElement | null>(null);
const props = defineProps({
  viewer360: { type: Object },
});
const state = reactive({
  viewer: null,
  isShow: false,
  panoramaList: null,
});

// 标记点数据格式化成vue组件
const markersFormatComponent = (markers) => {
  const allMonitorData = unref(monitorAllData);
  for (let i = 0; i < markers.length; i++) {
    const markerData = markers[i];
    let stationData = null;
    if (markerData.data.stcd) {
      for (let i = 0; i < allMonitorData.length; i++) {
        if (allMonitorData[i].stcd === markerData.data.stcd) {
          stationData = allMonitorData[i];
        }
      }
      const app = createApp(InfoPopup, {
        stationData: stationData,
      });
      const vm = app.mount(document.createElement("div"));
      markerData.tooltip = {
        content: vm.$el.outerHTML,
        className: "photoSphereViewerPopup",
        trigger: "click",
      };
    } else {
      const tooltipName = markerData.tooltip;
      if (tooltipName) {
        markerData.tooltip = {
          content: `<div class="tooltipName">${tooltipName}</div>`,
          className: "photoSphereViewerPopup",
          trigger: "click",
        };
      }
    }
  }
  return markers;
};

// 初始化
const initPhotoViewer = (data, isOriginal = false) => {
  const urlhttp = window.localStorage.getItem("GET_IMG_HTTP");
  let panorama = `${urlhttp}/` + data.smallImgUrl;
  // 查看原图
  if (isOriginal) {
    panorama = `${urlhttp}/` + data.panorama;
  }
  const markersData = uesParseUntilCannot(data.markers);
  const viewer = new Viewer({
    container: viewerRef.value,
    panorama: panorama,
    loadingImg:
      "https://gd-hbimg.huaban.com/70add8b5cd2fb6d3741009475e9fea5cc0ed30f261e06-4RXBJW",
    navbar: [
      "autorotate",
      "zoom",
      "move",
      "caption",
      "fullscreen",
      {
        id: "originalImageButton",
        content: `查看原图`,
        title: "查看原图",
        className: "originalImageButton",
        onClick: () => {
          state.viewer.destroy();
          initPhotoViewer(data, true);
        },
      },
    ],
    plugins: [
      [
        MarkersPlugin,
        {
          defaultHoverScale: true,
          markers: markersFormatComponent(markersData),
        },
      ],
    ],
  });
  state.viewer = viewer;

  // 隐藏原图按钮
  isOriginal
    ? viewer.navbar.getButton("originalImageButton").hide()
    : viewer.navbar.getButton("originalImageButton").show();

  const markersPlugin = viewer.getPlugin(MarkersPlugin);
  markersPlugin.addEventListener("select-marker", ({ marker }) => {
    const markID = marker.data.markID;
    const imageView360data = state.panoramaList;
    if (markID) {
      for (let i = 0; i < imageView360data.length; i++) {
        if (imageView360data[i].imgUrl === markID) {
          state.viewer.destroy();
          initPhotoViewer(imageView360data[i]);
        }
      }
    }
  });
  markersPlugin.showAllTooltips();
};

const handleChangeViewer = () => {
  state.viewer.destroy();
  state.isShow = false;
};

watch(
  () => props.viewer360,
  async () => {
    state.isShow = true;
    await nextTick();
    initPhotoViewer(props.viewer360);
  }
);

onMounted(async () => {
  const recordsList = await getPanoramaList();
  state.panoramaList = recordsList.records;
  // 所有站点信息数据
  const allMonitorData = await getAllMonitorData();
  monitorAllData.value = allMonitorData;
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.photoViewer360Wrap {
  width: 80%;
  height: 80%;
  pointer-events: none;
  overflow: hidden;
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .photoViewer360 {
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }
  .goBack {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px 14px 16px;
    background: rgba(37, 37, 37, 0.9);
    position: absolute;
    top: 30px;
    left: 20px;
    z-index: 1002;
    cursor: pointer;
    color: gray;
    pointer-events: auto;
    span.text {
      margin-left: 4px;
      font-size: 30px;
    }
    &:hover {
      color: #3fb0ff;
      background: rgba(37, 37, 37, 1);
    }
  }
}
</style>
